{% extends "netdisk/folder.html" %}

{% block title %}
    <title>DragonSite</title>
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/folder.css' %}">
    <style type="text/css" > #sidebar-publicdisk {background:#bdd5e7}</style>
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    <script src="{% static 'js/folder.js' %}"></script>
{% endblock %}


{% block content-core %}
    <div class="folder-menu">
        <div id="disk-menu">
            <button id="back-button" class="folder-button">返回上一级</button>
            <span id="goback" style="display:none">{% url "publicdisk:prev_folder" %}</span>
            <button id="create" class="folder-button">新建文件夹</button>
            <button id="upload" class="folder-button">上传文件</button>
            <div id="progress">
                <div id='progress-total'><div id='progress-finish'></div></div>
                <b id='progress-rate'>0%</b>
            </div>


        </div>
        <div id="path-nav">
            当前目录:
            {% for item in path_link %}
                <a href="{% url 'publicdisk:folder_show' path=item|last %}">{{ item|first }}</a>
            {% endfor %}
        </div>

        <!--文件上传表单-->
        <form action="{% url 'publicdisk:upload' path=path %}" method="post" enctype="multipart/form-data" id="upload_form">
            {% csrf_token %}
            <input type="file" name="files" id="file_upload" multiple="multiple" style="display:none">
        </form>
    </div>

    <div class="folder-container">
        <!--文件夹展示-->
        {% for folder in folders %}
            <div class="folder-detail">
                <a class="name" href="{% url 'publicdisk:folder_show' path=folder.path %}">
                    <div class="item-icon">
                        <img src="{% static 'image/folder.png' %}" alt="文件夹" width="100px" height="100px">
                    </div>
                    <div class="item-name">{{ folder.show_name }}</div>
                </a>
                <div class="hidden-option">
                    <p class="del-url" style="display:none">{% url 'publicdisk:delete' type="folder" path=folder.path %}</p >
                    <button class="rename-button">重命名</button>
                    <button class="del-button">删除</button>
                </div>
                <!--重命名表单-->
                <form action="{% url 'publicdisk:rename' type="folder" path=folder.path %}" method="post" enctype="multipart/form-data" class="rename-form" style="display:none">
                    {% csrf_token %}
                    <input type="text" name="new_name" placeholder="重命名" autocomplete="off">
                    <p></p >
                    <input type="submit" class="folder-button" value="确定">
                    <input type="button" class="folder-button" value="取消">
                </form>
            </div>
        {% endfor %}

        <!--新建文件夹表单-->
        <div id="folder_input">
            <form action="{% url 'publicdisk:create' path=path %}" method="post" enctype="multipart/form-data" id="create-form">
                {% csrf_token %}
                <input type="text" id="folder_name" name="folder_name" placeholder="文件夹名称" autocomplete="off">
                <p></p>
                <input type="button" id="create-button" class="folder-button" value="确定">
                <input type="button" id="cancel-create" class="folder-button" value="取消">
            </form>
        </div>
        <!--文件展示-->
        {% for file in files %}
             <div class="folder-detail">
                 <a class="name" href= "{% url 'publicdisk:download' path=file.get_url_path%}">
                     <div class="item-icon">
                         {% if file.is_image %}
                             <img class="item-icon" src={{ file.is_image }}  alt="图片">
                         {% else %}
                             <img src="{% static 'image/file.png' %}" alt="文件" width="100px" height="100px">
                         {% endif %}
                     </div>
                     <div class="item-name">{{ file.show_name }}</div>
                 </a>

                 <div class="hidden-option">
                     <p class="del-url" style="display:none">{% url 'publicdisk:delete' type="file" path=file.get_url_path %}</p>
                     <button class="rename-button">重命名</button>
                     <button class="del-button">删除</button>
                     <button class="preview-button"><a href="{% url 'publicdisk:preview' path=file.get_url_path %}" style="color: black">预览</a></button>
                 </div>
                <!--重命名表单-->
                 <form action="{% url 'publicdisk:rename' type="file" path=file.get_url_path %}" method="POST" enctype="multipart/form-data" class="rename-form" style="display:none">
                     {% csrf_token %}
                     <input type="text" name="new_name" placeholder="重命名" autocomplete="off">
                     <p></p >
                     <input type="submit" class="folder-button" value="确定">
                     <input type="button" class="folder-button" value="取消">
                 </form>
             </div>
        {% endfor %}
    </div>
{% endblock %}
